<template>
  <div>
    <div class="wrap warp1">
      <div class="wrap-title"><i class="wrap-icon kj"></i>快捷入口</div>
      <div class="content-enter">
        <div
          v-auth="`project-kanban-zhuanjia`"
          class="content-enter-item"
          @click="handleToGo('/expert/manage')"
        >
          <i class="content-icon-zjk"></i>
          专家库
        </div>
        <div
          v-auth="`project-kanban-wendang`"
          class="content-enter-item"
          @click="handleToGo('/document/other/download?docType=template')"
        >
          <i class="content-icon-mbxz"></i>
          模板下载
        </div>
        <div
          v-auth="`project-kanban-xueshu`"
          class="content-enter-item"
          @click="handleToGo('/project/kanban/academic?index=0')"
        >
          <i class="content-icon-xsjl"></i>
          学术交流
        </div>
      </div>
    </div>

    <div class="wrap">
      <router-link
        :to="{ path: '/project/kanban/notice', query: { index: 1 } }"
      >
        <p class="warp-more">更多<i class="more-icon"></i></p>
      </router-link>
      <div class="wrap-title">
        <i class="wrap-icon notice"></i> 公告

        <!-- <router-link :to="{ path: '/project/kanban/notice', query: { index: 1 } }">
          <i class="el-icon-right"></i>
        </router-link> -->
      </div>
      <div class="content-tip">
        <el-scrollbar wrap-class="content-tip" v-if="tips && tips.length">
          <div
            class="infinite-list"
            v-infinite-scroll="loadTips"
            infinite-scroll-delay="500"
          >
            <div
              class="content-tip-item tip-item"
              v-for="(item, index) in tips"
              :key="index"
              @click="handleToPreview(item)"
            >
              <div class="content-tip-item-wrap">
                <div class="content-tip-item-wrap-left font-color">
                  {{ item.title }}
                </div>
                <!-- <div class="content-tip-item-wrap-right"></div> -->
              </div>
              <div class="content-tip-item-wrap">
                <div class="content-tip-item-wrap-left font-size">
                  {{ item.createUserName }}
                </div>
                <div class="content-tip-item-wrap-right font-size">
                  {{ item.publishTime.split(" ")[0] }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-empty v-else :image-size="100" description="暂无数据"></el-empty>
      </div>
    </div>

    <div class="wrap">
      <router-link
        :to="{ path: '/project/kanban/library', query: { index: 3 } }"
      >
        <p class="warp-more">更多<i class="more-icon"></i></p>
      </router-link>
      <div class="wrap-title">
        <i class="wrap-icon zsk"></i> 知识库
        <!-- <router-link :to="{ path: '/project/kanban/library', query: { index: 3 } }">
          <i class="el-icon-right"></i>
        </router-link> -->
      </div>
      <el-tabs class="warp-tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in libType"
          :key="item.type"
          :label="item.name"
          :name="item.type"
        >
          <div v-for="(obj, index) in item.list" :key="index">
            <el-link
              :underline="false"
              :href="obj.dataLink"
              class="link-item"
              target="_blank"
              >{{ obj.dataText }}</el-link
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="wrap">
      <router-link
        :to="{ path: '/project/kanban/information', query: { index: 2 } }"
      >
        <p class="warp-more">更多<i class="more-icon"></i></p>
      </router-link>
      <div class="wrap-title"><i class="wrap-icon zx"></i> 前沿资讯</div>
      <div class="content-new">
        <el-scrollbar wrap-class="content-new" v-if="news && news.length">
          <div
            class="infinite-list"
            v-infinite-scroll="loadNews"
            infinite-scroll-delay="500"
          >
            <div
              class="content-tip-item tip-item"
              v-for="(item, index) in news"
              :key="index"
              @click="handleToPreview(item)"
            >
              <div class="content-tip-item-wrap">
                <div class="content-tip-item-wrap-left font-color">
                  {{ item.title }}
                </div>
              </div>
              <div class="content-tip-item-wrap">
                <div class="content-tip-item-wrap-left font-size">
                  {{ item.createUserName }}
                </div>
                <div class="content-tip-item-wrap-right font-size">
                  {{ item.publishTime.split(" ")[0] }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-empty v-else :image-size="100" description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { postAnnouncementList, postInformationList } from "/@/api/information";
// import * as api from "/@/api/project";
import { postProjectDataLibs } from "/@/api/project";
// import { ProjectStatusMap } from "../project/types";

const router = useRouter();
// const model = reactive({
//   searchValue: "",
//   activeName: "1",
//   busTypes: [],
//   searchConditions: [
//     { name: "全部", type: "1" },
//     { name: "项目", type: "2" },
//     { name: "文档", type: "3" },
//     { name: "人员", type: "4" },
//     { name: "成果", type: "5" }
//     // { name: "经费", type: "6" }
//   ],
//   tableData: [],
//   loading: false,
//   total: 0
// });
// const pageState = reactive({
//   pageNum: 1,
//   pageSize: 10
// });

// const handleSearch = (): void => {
//   router.push({ path: "/search/manage", query: { name: model.searchValue } });
// };

// const formatterStatusType = row => {
//   if (!row.approvalStatus) return "-";
//   return ProjectStatusMap.get(row.approvalStatus);
// };

// const search = async () => {
//   const { code, data } = await api.postProjectSearch({
//     businessKeywordLike: model.searchValue,
//     busTypes: model.busTypes,
//     ...pageState
//   });
//   if (code === 200) {
//     model.tableData = data.list;
//     model.total = data.rows;
//   }
// };

// const handleLook = row => {
//   console.log(row);
//   if (row.saveStatus === "1") {
//     router.push({
//       path: "/project/create",
//       query: { id: row.id, mode: "edit" }
//     });
//   } else {
//     router.push({
//       path: "/project/detail",
//       query: { id: row.id, mode: "edit" }
//     });
//   }
// };

const handleToGo = (val): void => {
  router.push(val);
};

let tips = ref([]);
let news = ref([]);

let activeName = ref("1");
const libType = ref([
  { name: "中文数据库", type: "1", list: [] },
  { name: "外文数据库", type: "2", list: [] },
  { name: "专利数据库", type: "3", list: [] },
  { name: "食品标准", type: "4", list: [] },
  { name: "啤酒专业网站", type: "5", list: [] },
  { name: "酵母专业网站", type: "6", list: [] },
  { name: "包装专业网站", type: "7", list: [] },
  { name: "学习提升网站", type: "8", list: [] }
]);
const handleClick = tab => {
  console.log(tab);
  activeName.value = tab.props.name;
};

// const handleTabClick = tab => {
//   model.activeName = tab.props.name;
//   switch (model.activeName) {
//     case "1":
//       model.busTypes = [];
//       break;
//     case "2":
//       model.busTypes = [1];
//       break;
//     case "3":
//       model.busTypes = [2];
//       break;
//     case "4":
//       model.busTypes = [3, 5, 6, 7];
//       break;
//     case "5":
//       model.busTypes = [4];
//       break;
//     // case "6":
//     //   break;
//   }
//   search();
// };

let tipsNum = ref(1);
let newsNum = ref(1);

const handleToPreview = item => {
  router.push({ path: "/project/kanban/preview", query: { id: item.id } });
};

const getTipsList = async (num: number) => {
  try {
    const { code, data } = await postAnnouncementList({
      publishType: "1",
      pageNum: num,
      pageSize: 10
    });
    if (code === 200) {
      if (data.list.length > 0) {
        tips.value = tips.value.concat(data.list);
      }
    }
  } catch (err) {
    console.log(err);
  }
};

const getNewsList = async (num: number) => {
  try {
    const { code, data } = await postInformationList({
      publishType: "1",
      pageNum: num,
      pageSize: 10
    });
    if (code === 200) {
      if (data.list.length > 0) {
        news.value = news.value.concat(data.list);
      }
    }
  } catch (err) {
    console.log(err);
  }
};

const loadTips = () => {
  if (tips.value.length > 9) {
    tipsNum.value++;
    getTipsList(tipsNum.value);
  }
};

const loadNews = () => {
  if (tips.value.length > 9) {
    newsNum.value++;
    getNewsList(newsNum.value);
  }
};

const getDataLibs = async () => {
  const { code, data } = await postProjectDataLibs({});
  if (code === 200) {
    data.list.map(el => {
      const target = libType.value.find(lib => lib.type === el.dataType);
      if (target) {
        target.list.push(el);
      }
    });
    libType.value = libType.value.filter(el => el.list.length > 0);
    if (libType.value.length !== 0) {
      activeName.value = libType.value[0].type;
    }
  }
};

getTipsList(tipsNum.value);
getNewsList(newsNum.value);
getDataLibs();
</script>

<style lang="scss" scoped>
$bgcolor: #eaeef3;

.font-color {
  text-indent: 14px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #98c2ff;
  margin-bottom: 6px;
}

.font-size {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(227, 234, 253, 0.6);
  padding: 0 14px;
}

.el-divider--horizontal {
  margin: 10px 0;
}

.wrap {
  position: relative;
  margin: 30px 0;
  width: 100%;
  background: rgba(63, 65, 92, 0.3);

  .warp-tabs {
    padding-top: 20px;
  }

  .warp-more {
    position: absolute;
    top: -8px;
    right: 14px;
    width: 60px;
    height: 18px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #98c2ff;
    line-height: 17px;
    text-align: center;
    background: linear-gradient(
      90deg,
      rgba(188, 199, 245, 0.07) 0%,
      rgba(135, 232, 222, 0.05) 100%
    );
    border-radius: 14px;
    border: 1px solid rgba(113, 125, 195, 0.8);
    cursor: pointer;

    .more-icon {
      width: 12px;
      height: 12px;
      display: inline-block;
      background: url(../../assets/v2/more.png) no-repeat;
      background-size: 12px 12px;
      margin-left: 2px;
      cursor: pointer;
    }
  }

  &-title {
    position: absolute;
    left: 14px;
    top: -12px;
    font-size: 18px;
    font-family: HYQiHei-FEJ, HYQiHei;
    font-weight: normal;
    color: #88c4f8;
    background: linear-gradient(261deg, #acc0fa 0%, #6a90fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .wrap-icon {
      width: 19px;
      height: 19px;
      display: inline-block;
      vertical-align: middle;
    }

    .kj {
      background: url(../../assets/v2/kj.png) no-repeat;
      background-size: 19px 19px;
      margin-right: 8px;
    }

    .notice {
      background: url(../../assets/v2/notice.png) no-repeat;
      background-size: 19px 19px;
    }

    .zsk {
      background: url(../../assets/v2/zsk.png) no-repeat;
      background-size: 19px 19px;
    }
    .zx {
      background: url(../../assets/v2/zx.png) no-repeat;
      background-size: 19px 19px;
    }

    .el-icon-right {
      font-size: 16px;
      position: absolute;
      right: 10px;
      top: 8px;
      cursor: pointer;
    }
  }
}

.warp1 {
  height: 104px;
}

.content-enter {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;

  &-item {
    margin-left: 8px;
    width: 96px;
    background: rgba(63, 65, 92, 0.3);
    height: 67px;
    line-height: 67px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-family: HYQiHei-FEJ, HYQiHei;
    font-weight: normal;
    color: #88c4f8;

    &:last-child {
      margin-right: 8px;
    }
  }
}

.content-tip {
  padding-top: 20px;
  height: 300px;

  &-item {
    &-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-left {
        flex: 1;
        text-align: left;
        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        white-space: nowrap;
        /*规定段落中的文本不进行换行 */
        word-break: break-all;
      }

      &-right {
        text-align: right;
        width: 130px;
        font-size: 12px;
      }
    }
  }
}

.content-new {
  padding-top: 20px;
  height: 350px;
}

.content-message {
  min-height: 300px;
}

.el-link {
  padding: 0 0 12px 4px;
}

.search-text {
  color: #f89c34;
  cursor: pointer;
  margin: 20px 0;
}

.tip-item {
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tip-item:nth-child(odd) {
  background: #799bfb14;
}

::v-deep .warp-tabs .el-tabs__nav-wrap.is-scrollable {
  background: #799bfb12;
}

::v-deep .warp-tabs .el-icon-arrow-left,
::v-deep .warp-tabs .el-icon-arrow-right {
  color: #5298ff;
}

::v-deep .warp-tabs .el-tabs__item {
  color: rgba(152, 194, 255, 0.6);
}

::v-deep .warp-tabs .el-tabs__item.is-active {
  color: #98c2ff;
}

::v-deep .warp-tabs .el-tabs__nav-wrap::after {
  background: rgba(152, 194, 255, 0.2);
}

::v-deep .warp-tabs .el-tabs__active-bar {
  background: #98c2ff;
}

.link-item {
  margin-left: 12px;
  color: #98c2ff;

  &:hover {
    color: #98c2ff;
  }
}
.content-enter-item {
  line-height: 30px;
}
.content-icon-zjk {
  width: 31px;
  height: 25px;
  display: block;
  background: url(../../assets/v2/zjk.png) no-repeat;
  background-size: 31px 25px;
  margin-left: 24px;
  margin-top: 8px;
}
.content-icon-mbxz {
  width: 31px;
  height: 25px;
  display: block;
  background: url(../../assets/v2/mbxz.png) no-repeat;
  background-size: 31px 25px;
  margin-left: 24px;
  margin-top: 8px;
}
.content-icon-xsjl {
  width: 31px;
  height: 25px;
  display: block;
  background: url(../../assets/v2/xsjl.png) no-repeat;
  background-size: 31px 25px;
  margin-left: 24px;
  margin-top: 8px;
}
</style>
